<template>
  <!-- 文创合同  -->
    <div class="interestCalculationDetailsPage">
        <div class="search-wrap d-flex a-center flex-wrap">
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>项目名称</label>
                <el-input class="m-l10" v-model="form.projectName" placeholder="请输入项目名称" clearable></el-input>
            </div>
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>合同/协议类别</label>
                <el-input class="m-l10" v-model="form.contractType" placeholder="请输入合同/协议类别" clearable></el-input>
            </div>
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>合同信息类别</label>
                <el-input class="m-l10" v-model="form.contractInfoType" placeholder="请输入合同信息类别" clearable></el-input>
            </div>
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>合同签约方式</label>
                <el-input class="m-l10" v-model="form.contractWay" placeholder="请输入合同签约方式" clearable></el-input>
            </div>
            <div class="search-item d-flex a-center m-l10 m-b10">
                <el-button
                    color="#fc702b"
                    style="color:#fff;"
                    @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                    color="#f0f0f0"
                    style="color: #000000"
                    @click.prevent="onReset"
                >重置</el-button>
            </div>
            <el-divider direction="vertical"  class="m-b10"/>
            <div class="search-buttons m-l10 d-flex a-center m-b10">
                <el-button class="button_edit" @click="onExport">
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <public-table
                ref="publicTableRef"
                class="m-t20"
                index
                index-width="70"
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
                @handle-selection-change="handleSelectionChange"
        ></public-table>
    </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {
    ElSelect,
    ElOption,
    ElDivider, ElMessage, ElMessageBox, ElDatePicker, ElUpload, ElLoading,
} from "element-plus";
import PublicTable from "@/components/PublicTable.vue";

import {tableCommonFun} from "@/hooks/tableCommon";
import {
    companyApi,
    culturalCreativityApi,
    interestManagement,
    medicalTreatmentApi,
    retirementApi
} from "@/api/businessFinance";
import {exportExcelFile} from "@/common/utils/GlobalUtils";
import PublicDialog from "@/components/PublicDialog.vue";
import {UploadFilled} from "@element-plus/icons-vue";

const interfaceConfig = reactive({
    fileName:'businessFinance',
    apiPath:'culturalCreativityApi.culturalPage',
});
const exportConfig = reactive({
    fileName:'businessFinance',
    apiPath:'culturalCreativityApi.exportCultural',
    tableName:'文创合同表'
});
const {
    form,
    page,
    tableOption,
    tableData,
    selectedArr,
    onQuery,
    onReset,
    onPageChange,
    getData,
    onExport,
    handleSelectionChange
}  = tableCommonFun(interfaceConfig,exportConfig);

form.value = {
    projectName:'',
    contractType:'',
    contractInfoType:'',
    contractWay:''
}

tableOption.value = [
    { label: "项目名称", prop: "projectName", minWidth: 80 },
    { label: "收付类别", prop: "paymentType", minWidth: 80 },
    { label: "合同信息类别", prop: "contractType", minWidth: 120 },
    { label: "合同名称", prop: "contractName", minWidth: 80 },
    { label: "合同金额", prop: "contractMoney", minWidth: 80 },
    { label: "合同签订时间", prop: "contractTime", minWidth: 120 },
    { label: "合同签约方式", prop: "contractWay", minWidth: 120 },
    { label: "应收/付金额（合计）", prop: "wantMoney", minWidth: 150 },
    { label: "实收/付金额（合计）", prop: "realMoney", minWidth: 150 },
];


const companyList = ref([]);
/**
 * 查公司列表
 */
const getCompanyList = () => {
    companyApi.getList({}).then(res=>{
        companyList.value = res.data;
    });
}

/**
 * 查询银行列表
 *
 */
const bankAccountList = ref([]);
const getBankList = () => {
    companyApi.getBankList().then(res=>{
        if(res.code === '200'){
            bankAccountList.value = res.data;
        }
    });
}

/**
 * 模板下载
 */
const templateDownload = () => {
    culturalCreativityApi.templateCultural().then(res=>{
        if(res){
            exportExcelFile(res,'文创合同模板');
        }else{
            ElMessage.error('下载失败!');
        }
    })
}

onMounted(()=>{
    getData({
        pageNum:1,
        pageSize:10,
        param:{}
    });
    getCompanyList();
    getBankList();
});
</script>

<style lang="scss" scoped>
.interestCalculationDetailsPage{
  .search-wrap{
    .search-item{

      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
.public-dialog-content{
  .dialog-title-box{
    height: 30px;
    span{
      font-size: 15px;
      font-weight: 600;
    }
  }
}
</style>
